<template>
    <view-box>
        <div class="background-top">
            <img src="./images/VIP_02.png" alt="">
        </div>
        <div class="">

        </div>
        <div class="padding-vip">
            <p style="font-size:16px;">温馨提示:</p>
            <p>1.服务将于在线支付成功后自动开通。</p>
            <p>2.对服务有任何疑问或者出现使用问题，请拨打天南山客服专线**********。</p>
            <p>3.服务一经开通，不予退款，敬请谅解。</p>
            <p>4.以上数据根据大数据情况统计，仅供参考。</p>
        </div>
        <div class="">
            <x-button class="li-buton" @click.native="$router.push('/joinVip')">立即加入</x-button>
        </div>
    </view-box>
</template>
<script>
import { ViewBox, Box, Flexbox, FlexboxItem, XHeader, Timeline, TimelineItem, XButton } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Flexbox,
    FlexboxItem,
    XHeader,
    Timeline,
    TimelineItem,
    XButton
  },
  data () {
    return {
      count: 3
    }
  }
}
</script>
<style scoped lang="less">
    .background-top{
        margin: 0;
        padding: 0;
        height: auto;
        position: relative;
    }
    .background-top img{
        width:100%;
        height: 100%;
    }
  .padding-vip{
      width: 100%;
      overflow: hidden;
  }
  .padding-vip p{
      width: 96%;
      padding: 1px 2%;
      font-size: 14px;
  }
  .li-buton{
      background: #de3c3d;
      width: 100%;
      border: 1px solid #de3c3d;
      border-radius: 0px;
      color: #fff;
      position: fixed;
      bottom: 0px;
      left: 0px;
  }
    .timeline-demo {
        p {
            color: #888;
            font-size: 40px;
        }
        h4 {
            color: #666;
            font-weight: normal;
        }
        .recent {
            color: rgb(4, 190, 2)
        }
    }
</style>
<style>
    .vux-label{
        font-size: 14px !important;
    }
    .weui-cell__ft{
        font-size: 14px;
    }
    .weui-cell_access{font-size: 14px;}
</style>